<template>
  <div class="shopcascoupon">
    <div class="shopcascoupon-select">
      <div class="shopcascoupon-biaoti">
        <span>商家代金券列表</span>
      </div>
      <div>
        <div class="shopcascoupon-mulu">
          <span>代金券id</span>
          <el-divider direction="vertical"></el-divider>
          <span>商家id</span>
          <el-divider direction="vertical"></el-divider>
          <span>代金券门槛</span>
          <el-divider direction="vertical"></el-divider>
          <span>代金券优惠金额</span>
        </div>
        <div class="shopcascoupon-list" v-for="itme in list" :key="itme">
          <span>{{ itme.id }}</span>
          <span>{{ itme.shopId }}</span>
          <span>{{ itme.threshold }}</span>
          <span>{{ itme.discount }}</span>
          <el-button type="danger" @click="getCasCouponDel(itme.id,itme.shopId)" :plain="true">删除</el-button>
        </div>
      </div>
      <div class="shopcascoupon-fenye">
        <el-pagination
            v-model:currentPage="currentPage"
            v-model:page-size="pageSize"
            :background="true"
            layout="prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </div>
    <div class="shopcascoupon-tianjia">
      <p class="tianjia">添加</p>
      <div>
        <el-form :label-position="right" label-width="100px" :model="formLabelAlign" style="max-width: 460px">
          <el-form-item label="商家id">
            <el-input v-model="formLabelAlign.shopId"></el-input>
          </el-form-item>
          <el-form-item label="代金券门槛">
            <el-input v-model="formLabelAlign.threshold"></el-input>
          </el-form-item>
          <el-form-item label="代金券优惠金额">
            <el-input v-model="formLabelAlign.discount"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="shopcascoupon-zengjia">
        <el-button :plain="true" type="primary" @click="getCasCouponTianJia()">添加</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import {ElMessage} from 'element-plus'

export default {
  name: "ShopCasCouponList",
  data() {
    return {
      list: [],
      pageSize: 5,
      currentPage: 1,
      total: 1000,
      id: '',
      formLabelAlign: {
        id: '',
        shopId: '',
        threshold: '',
        discount: ''
      },
      couponUpdate: {
        threshold: '',
        discount: ''
      }
    }
  },
  mounted() {
    this.getShopCasCouponList();
    this.getCasCouponTotal();
  },
  methods: {
    getShopCasCouponList() {
      this.$axios.get('/shopcascoupon/casCouponPage', {
        params: {
          pageNum: this.currentPage
        }
      })
          .then(res => {
            this.list = res.page.records
          })
    },
    getCasCouponTotal() {
      this.$axios.get('/shopcascoupon/casCouponTotal')
          .then(res => {
            this.total = res.total
          })
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getShopCasCouponList();
    },
    getCasCouponTianJia() {
      this.$axios.get('/shopcascoupon/tianjia', {
        params: {
          shopId: this.formLabelAlign.shopId,
          threshold: this.formLabelAlign.threshold,
          discount: this.formLabelAlign.discount
        }
      })
          .then(res => {
            ElMessage(res.couponAdd);
          })
    },
    getCasCouponDel(id, shopId) {
      this.$axios.delete('/shopcascoupon/del', {
        params: {
          id: id,
          shopId: shopId
        }
      })
          .then(res => {
            ElMessage(res.couponDel);
            this.getShopCasCouponList();
          })
    }
  }
}
</script>

<style>

.shopcascoupon {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.shopcascoupon-select {
  margin-right: 300px;
  margin-bottom: 30px;
}

.shopcascoupon-biaoti {
  font-size: 30px;
}

.shopcascoupon-mulu {
  margin-bottom: 10px;
}

.shopcascoupon-mulu > span {
  display: inline-block;
  width: 120px;
}

.shopcascoupon-list > div {
  display: inline-block;
}

.shopcascoupon-list {
  margin-bottom: 10px;
}

.shopcascoupon-list > span {
  display: inline-block;
  width: 120px;
  text-align: center;
}

.shopcascoupon-tianjia {
  margin-right: 300px;
}

.tianjia {
  font-size: 20px;
}

.shopcascoupon-zengjia {
  font-size: 20px;
  margin-bottom: 30px;
}
</style>